<template>
  <div class="ranking-container">
    <div class="header">
      <button
        v-for="(button, index) in headerButtons"
        :key="index"
        :class="['header-button', { active: activeButton === index }]"
        @click="setActiveButton(index)"
      >
        {{ button.label }}
      </button>
    </div>
    <div class="ranking-list">
      <div class="ranking-item" v-for="item in items" :key="item.id">
        <img :src="item.avatar" alt="avatar" class="avatar" />
        <div class="content">
          <div class="title">{{ item.title }}</div>
          <div class="badges">
            <span class="badge success">{{ item.badgeGreen }}</span>
            <span class="badge danger">{{ item.badgeRed }}</span>
          </div>
        </div>
        <div class="percentage">{{item.percentage }}<br/>命中率</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getInfoExpertList } from '@/api/info'

const headerButtons = [{ label: '胜率榜' }, { label: '回报榜' }, { label: '连红榜' }]

const activeButton = ref(0)

onMounted(() => {
  getData()
})

function setActiveButton(index) {
  activeButton.value = index
  // 根据业务逻辑，执行相应的操作，比如请求不同的数据
  console.log(`Button ${index} clicked`)
}

const items = ref([])

const getData = async () => {
  try {
    const res = await getInfoExpertList()
    if (res.code === 200) {
      const expertList = res.data
      // TODO: Implement the logic to transform the expertList into the expected format for the items array
      const transformedItems = expertList.map((expert) => ({
        id: expert.id,
        avatar: expert.headUrl,
        title: expert.nickname,
        badgeGreen: `近10中${expert.lastTenWin}`, // Placeholder value, replace with actual logic
        badgeRed: expert.continuesRed + '连红', // Placeholder value, replace with actual logic
        percentage: (expert.weekWin * 100).toFixed() + '%' // Replace with the actual winning rate of the expert
      }))
      items.value = transformedItems
    }
  } catch (error) {
    console.log(error)
  }
}
</script>

<style scoped lang="scss">
.ranking-container {
  width: 336px;
  border-radius: 10px;
//   height: 700px;
  overflow: scroll;
  position: sticky;
  top: 70px;
  background-color: #fff;
}

.header {
  display: flex;
  justify-content: space-around;
  padding: 1rem 0;

  border-bottom: 1px solid #ebebeb;

  .header-button {
    padding: 0.5rem 1rem;
    font-size: 14px;
    color: #333;
    background-color: transparent;
    border: none;
    cursor: pointer;
    border-radius: 20px;

    &.active {
      background: #4caf50;
      color: #fff;
      //   border-bottom: 2px solid #4caf50;
    }
  }
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #ebebeb;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 1rem;
}

.content {
  flex-grow: 1;

  .title {
    font-size: 14px;
    color: #333;
  }

  .badges {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 12px;

    .badge {
      padding: 0.2rem 0.6rem;
      border-radius: 12px;
      font-size: 12px;

      &.success {
        background-color: #e0f3e3;
        color: #4caf50;
      }

      &.danger {
        background-color: #fde4e4;
        color: #f44336;
      }
    }
  }
}

.percentage {
  font-size: 14px;
  color: #f44336;
  font-weight: bold;
  text-align: center;
}
</style>
